@import "../mixin";
@import "../varible";
.filter-wrapper{
  height: 100%;
  flex: 1 0 auto;
  background:$baseColor;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .filter-title, .filter-btm{
    display: flex;
    justify-content: space-between;
  }
  .filter-title{
    padding: 0 12px;
    @include border-bottom-1px($borderBottom);
    font-size: 1rem;
    line-height: 44px;
    .svg-box{
      color: $mainColor;
      width: 20px;
    }
    .text{
      color: $textColor2;
    }
  }
  .filter-btm{
    @include border-top-1px($borderBottom);
    height: 44px;
    width: 100%;
    display: flex;
    p {
      text-align: center;
      line-height: 44px;
    }
    .reset{
      color: $textColor2;
      width: 60%;
    }
    .sure{
      width: 40%;
      background: $mainColor;
      color: $baseColor;
    }
  }
  .filter-container{
    flex: 1 0 auto;
    position: relative;
    .filter-scroll{
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .item-name{
      line-height: 40px;
      color: $textColor2;
      font-size: 14px;
    }
    .process{
      padding: 0 10px;
      .item-input{
        .el-select{
          width: 100%;
        }
      }
    }
    .process-person{
      display: flex;
      padding: 0 10px;
      line-height: 40px;
      font-size: 14px;
      color: $textColor2;
      .process-person-name{
        flex: 0 0 46px;
      }
      .process-person-name-filter{
        flex: 1 0 auto;
        position: relative;
      }
      .process-person-name-filter-inner{
        position: absolute;
        width: 100%;
        overflow: hidden;
        color: $textColor2;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .process-person-list-filter{
      }
      .process-person-list{
        overflow: hidden;
        color: $textColor2;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
        flex: 1 0 auto;
        display: flex;
        justify-content: flex-end;
        .list-name{
          padding: 0 3px;
        }
      }
    }
    .process-time,.process-status{
      padding: 0 10px;
      .time-picker{
        display: flex;
        justify-content: space-between;
        .start-time,.end-time{
          flex: 1;
          text-align: center;
          padding: 5px;
          p{
            border: 1px solid $solidColor;
            color: $textColor2;
            font-size: 14px;
            line-height: 32px;
            border-radius: 4px;
          }
        }
      }
      .error-msg{
        font-size: 12px;
        color: $errorColor;
        line-height: 18px;
        padding: 0 10px;
      }
      .status-list{
        display: flex;
        justify-content: space-between;
        p{
          flex: 1;
          text-align: center;
          font-size: 14px;
          color: $textColor2;
          padding: 5px;
          span{
            display: block;
            border: 1px solid $solidColor;
            border-radius: 4px;
            padding:8px 5px;
          }
        }
      }
    }
  }
  .activeSelect{
    background: $mainBgColor;
    color: $mainColor;
    border: 1px solid $mainBgColor!important;
  }
}
